<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" media="print" href="/print/_css/charge.css" />
    <title>收费打印</title>
</head>

<body>
    <div class="printOrder" id="chargeApp">
        <div class="print-pay_box">
            <!-- <h3 style="text-align:center;">{{hospital}}</h3> -->
            <div class="print-header-box">
                <h3 class="print_head_title_box">
                    <div class="print-logo_img">
                        <img class="img-logo" style="margin-top:4mm;" :src="logo" />
                    </div>
                    <span style="display: inline-block;width:100%;">{{hospitalName}}</span>
                    <span style="font-size:6mm;">{{type==1?'充值':'退款'}}清单</span>
                </h3>
                <p>
                    <!-- <span class="print_hospital_unit">单位：元</span> -->
                </p>
                <ul v-if="detail" class="nav_patient_menu">
                    <li style="text-indent: 7mm">姓 名：{{detail.name}}</li>
                    <li>性 别：{{detail.sex==1?'男':(detail.sex==2?'女':'不详')}}</li>
                    <li>
                        年 龄：<span v-if="detail.age > 17 ">{{detail.age}}岁</span>
                        <span v-else>{{detail.birthday | toAge}}</span>
                    </li>
                    <li style="text-indent:7mm">档案号：{{detail.archivesCode}}</li>
                    <li >
                        {{type==1?'收费':'退款'}}日期：{{time}}
                        <!-- 收费日期：{{time}} -->
                    </li>
                </ul>
            </div>
            <div class="item_content">
                <table v-if="type==1" class="durg_table storage_tab">
                    <tr class="table-title thead_box"
                        style="border-top:1px dashed #101010;border-bottom:1px dashed #101010;">
                        <td style="width: 5mm;"></td>
                        <td style="width:30%;font-size:3mm;">项目</td>
                        <td style="font-size:3mm;width:15%">
                            充值金额
                        </td>
                        <td style="width:20%" v-if="type==1">赠送金额</td>
                        <td style="width:20%">实际充值</td>
                    </tr>
                    <tr v-for="(item,index) in itemList" :class="{'active_item':item.show}" style="border-bottom: 0;"
                        :key="index">
                        <td style="width: 5mm;"></td>
                        <td style="width:30%">
                            充值
                        </td>
                        <td style="width:15%">
                            ￥{{item.changeAmount}}
                        </td>
                        <td style="width:20%">
                            ￥{{item.giveAmount}}
                        </td>
                        <td style="width:20%">
                            ￥{{item.totalChange}}
                        </td>
                    </tr>
                </table>
                <table v-else class="durg_table storage_tab">
                    <tr class="table-title thead_box"
                        style="border-top:1px dashed #101010;border-bottom:1px dashed #101010;">
                        <td style="width: 5mm;"></td>
                        <td style="width:10%;font-size:3mm;">项目</td>
                        <td style="width:20%;font-size:3mm;">
                            赠送金额扣除
                        </td>
                        <td style="width:20%;font-size:3mm;">赠送项目金额扣除</td>
                        <td style="width:20%;">退费金额</td>
                        <td  style="width:20%;font-size:3mm;">账户余额</td>
                    </tr>
                    <tr v-for="(item,index) in itemList" :class="{'active_item':item.show}" style="border-bottom: 0;"
                        :key="index">
                        <td style="width: 5mm;"></td>
                        <td style="width:10%">
                            退费
                        </td>
                        <td  style="width:20%;">
                            ￥{{item.giveAmount}}
                        </td>
                        <td style="width:20%;">
                            ￥{{item.projectDeductionAmount}}
                        </td>
                        <td style="width:20%;">
                            ￥{{item.changeAmount}}
                        </td>
                        <td  style="width:20%;"> ￥{{item.balance}}</td>
                    </tr>
                </table>
            </div>

            <div class="print_footer_box">
                <p style="width:25%;">收 款 人：{{memberName}}</p>
                <p>客户签字：</p>
            </div>
        </div>
        <div class="statistics_money">
            <p><span>{{type==1?'实收':'退款'}}金额：</span><span>￥{{sfTotal}}</span></p>
            <p>
                <span>账户余额：</span><span>￥{{balanceMoney}}</span>
            </p>
        </div>
    </div>
    <!-- built files will be auto injected -->
    <script src="https://lib.baomitu.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://lib.baomitu.com/axios/0.17.0/axios.min.js"></script>
    <script src="https://lib.baomitu.com/qs/6.5.2/qs.min.js"></script>
    <!-- <script src="/src/_js/http.js"></script> -->
    <script>
        var vm = new Vue({
            el: "#chargeApp",
            data: {
                detail: "",
                memberName: '',
                receivedMoney: 0,
                hospitalName: '',
                logo: '',
                sfTotal: 0,
                balanceMoney: 0,
                time: '',
                itemList: [],
                type:''
            },
            filters: {
                toAge(birthday) {
                    if (!birthday) return "";
                    var now = new Date();
                    var year = now.getFullYear();
                    var month = now.getMonth() + 1;
                    var day = now.getDate();
                    var hour = now.getHours();
                    var minute = now.getMinutes();
                    var second = now.getSeconds();
                    var myDate = new Date(birthday);
                    var myYear = myDate.getFullYear();
                    var myMonth = myDate.getMonth() + 1;
                    var myDay = myDate.getDate();
                    var myHour = myDate.getHours();
                    var myMinute = myDate.getMinutes();
                    var mySecond = myDate.getSeconds();
                    var isLeapYear = function isLeapYear(year) {
                        return (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;
                    };
                    var getDaysOfMonth = function getDaysOfMonth(dateStr) {
                        var date = new Date(dateStr);
                        var year = date.getFullYear();
                        var mouth = date.getMonth() + 1;
                        var day = 0;

                        if (mouth == 2) {
                            day = isLeapYear(year) ? 29 : 28;
                        } else if (
                            mouth == 1 ||
                            mouth == 3 ||
                            mouth == 5 ||
                            mouth == 7 ||
                            mouth == 8 ||
                            mouth == 10 ||
                            mouth == 12
                        ) {
                            day = 31;
                        } else {
                            day = 30;
                        }
                        return day;
                    };
                    var gapSecond = second - mySecond;
                    if (gapSecond < 0) {
                        minute -= 1;
                        gapSecond = 60 - mySecond + second;
                    }
                    var gapMinute = minute - myMinute;
                    if (gapMinute < 0) {
                        hour -= 1;
                        gapMinute = 60 - myMinute + minute;
                    }
                    var gapHour = hour - myHour;
                    if (gapHour < 0) {
                        day -= 1;
                        gapHour = 24 - myHour + hour;
                    }
                    var gapDay = day - myDay;
                    if (gapDay < 0) {
                        month -= 1;
                        gapDay = getDaysOfMonth(birthday) - myDay + day;
                    }
                    var gapMonth = month - myMonth;
                    if (gapMonth < 0) {
                        year -= 1;
                        gapMonth = 12 - myMonth + month;
                    }
                    var gapYear = year - myYear;
                    if (gapYear < 0) {
                        gapYear = 0;
                    }
                    var dateStr = `${gapYear}岁${gapMonth}月${gapDay}天`;
                    return dateStr;
                }
            },
            mounted() {
                var th = this;
                window.addEventListener("message", function (event) {
                    var data = event.data;
                    var pa = JSON.parse(data.params);
                    if (data.cmd == "postJson") {
                        th.$nextTick(function () {
                            th.hospitalName = pa.hospitalName;
                            th.detail = pa.detail;
                            let list= pa.itemList;
                            list.map(it=>{
                                it.totalChange=Number(it.changeAmount+it.giveAmount).toFixed(2)
                            })
                            th.itemList = list;
                            th.logo = pa.logo;
                            th.sfTotal = pa.sfTotal;
                            th.balanceMoney = pa.balanceMoney;
                            th.memberName = pa.memberName;
                            th.time = pa.time;
                            th.type=pa.type;
                            setTimeout(function () {
                                window.print();
                            }, 500);
                        });
                    }
                });
            },
            methods: {
            }
        });
    </script>
</body>

</html>